<template>
  <a-spin :spinning="loading">
    <a-card title="风险等级查询" :body-style="{paddingBottom: 0}">
      <a-form :form="form" class="inline-form">
        <section class="flex items-center">
          <section class="flex-1 mr-16">
            <a-row :gutter="16">
              <a-col :span="8">
                <a-form-item label="客户姓名">
                  <a-input
                    placeholder="请输入客户姓名"
                    :max-length="50"
                    @keyup.enter="getRiskData"
                    v-decorator="[
                      'name',
                      {rules: [{required: true, message: '请输入客户姓名'}]}
                    ]"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="联系方式">
                  <a-input
                    placeholder="请输入联系方式"
                    :max-length="50"
                    @keyup.enter="getRiskData"
                    v-decorator="[
                      'phone',
                      {rules: [{required: true, message: '请输入联系方式'}]}
                    ]"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="身份证号码">
                  <a-input
                    placeholder="请输入身份证号码"
                    :max-length="50"
                    @keyup.enter="getRiskData"
                    v-decorator="[
                      'credentialNo',
                      {rules: [{required: true, message: '请输入身份证号码'}]}
                    ]"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </section>
          <a-form-item>
            <a-button type="primary" @click="getRiskData">查询</a-button>
          </a-form-item>
        </section>
      </a-form>
    </a-card>
    <a-card class="mt-24" title="客户风险查询结果" :body-style="{minHeight: '400px'}">
      <section class="info-form" v-if="data">
        <section class="text-18 font-bold mb-16">基本信息</section>
        <a-form class="inline-form">
          <a-row type="flex" :gutter="16" style="margin-right: 0; padding-right: 4px;">
            <a-col :span="8">
              <a-form-item label="客户姓名">{{ data.name }}</a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="联系方式">{{ data.phone }}</a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="身份证号">{{ data.credentialNo }}</a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="证件有效期">{{ data.credentialEffectiveTime ? moment(data.credentialEffectiveTime).format('YYYY-MM-DD') : '未知' }}</a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <section class="text-18 font-bold mb-16">驾照信息</section>
        <a-form class="inline-form">
          <a-row type="flex" :gutter="16" style="margin-right: 0; padding-right: 4px;">
            <a-col :span="8">
              <a-form-item label="驾照类型">{{ data.driverLicenseTypeName }}</a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="领取日期">{{ data.driverLicenseGetTime ? moment(data.driverLicenseGetTime).format('YYYY-MM-DD') : '未知' }}</a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="有效期">{{ data.driverLicenseEffectiveTime ? moment(data.driverLicenseEffectiveTime).format('YYYY-MM-DD') : '未知' }}</a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <section class="text-18 font-bold mb-16">风险信息</section>
        <a-form class="inline-form">
          <a-row type="flex" :gutter="16" style="margin-right: 0; padding-right: 4px;">
            <a-col :span="8">
              <a-form-item label="风险等级">
                <a-badge v-if="data.resultStatus === 1" status="success" text="白名单"/>
                <section class="flex items-center" v-else>
                  <a-badge v-if="data.resultStatus === 5" status="error" text="黑名单"/>
                  <a-badge v-else status="warning" :text="$utils.getEnumName(customerLevelEnums, data.resultStatus)"/>
                  <a-tooltip v-if="data.resultStatus === 5" title="黑名单客户不允许进行任何租车服务">
                    <a-icon class="ml-3 error-hintf5222d" type="question-circle"/>
                  </a-tooltip>
                </section>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="三天内被查次数">{{ data.withInThreeDayQueryCount }}</a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="历史被查次数">{{ data.queryTotalCount }}</a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item style="display: block; margin-bottom: 0;" label="本年以来举报记录">
                <a-table
                  class="mt-22"
                  :columns="columns"
                  :data-source="tableData"
                  :pagination="pagination"
                >
                  <template #dishonestPerson="val, data">
                    <div>名称：{{data.name}}</div>
                    <div>手机：{{data.phone}}</div>
                  </template>
                  <template #card="val, data">
                    <div>类型：{{data.credentialTypeName}}</div>
                    <div class="ss-break-all">号码：{{data.credentialNo}}</div>
                  </template>
                  <template #report="val, data">
                    <div class="flex items-center">
                      <div>
                        <div>
                          <span>类型：</span>
                          <span v-if="reportTypesFn(data.reportTypes, data).length>10">
                <template>
                  <a-tooltip>
                    <template slot="title">
                      {{reportTypesFn(data.reportTypes, data)}}
                    </template>
                    <span class="cursor-pointer">{{reportTypesFn(data.reportTypes, data).substring(0,11)}}...</span>
                  </a-tooltip>
                </template>
              </span>
                          <span v-else>{{reportTypesFn(data.reportTypes, data)}}</span>
                        </div>
                        <div>
                          <span>原因：</span>
                          <span v-if="data.reportReason.length>10">
                <template>
                  <a-tooltip>
                    <template slot="title">
                      {{data.reportReason}}
                    </template>
                    <span class="cursor-pointer">{{data.reportReason.substring(0,11)}}...</span>
                  </a-tooltip>
                </template>
              </span>
                          <span v-else>{{data.reportReason}}</span>
                        </div>
                      </div>
                      <div @click="openPicsHandle(data)" class="ml-10 cursor-pointer">
                        <a-icon type="picture" :style="{ fontSize: '20px', color: '#08c' }"/>
                      </div>
                    </div>
                  </template>
                  <template #state="val, data">
                    <a-badge v-if="data.reportAuditStatus === 1" status="warning" text="待审核"/>
                    <a-badge v-else status="success" text="已生效"/>
                  </template>
                  <template #resultTitle>
                    <div>处理结果</div>
                  </template>
                  <template #result="val, data">
                    <section class="flex justify-center">
                      <a-badge :status="data.resultStatus === 0 ? 'default' : 'processing'"></a-badge>
                      <a href="javascript:;">{{ $utils.getEnumName(customerLevelEnums, data.resultStatus) || '未判定' }}</a>
                    </section>
                  </template>
                </a-table>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </section>
      <a-empty v-else class="mt-60">
        <section slot="description">
          <section class="my-16">暂无结果</section>
          <section>请输入查询条件或者在<router-link to="/member-info-list">会员信息</router-link>中选择用户查询</section>
        </section>
      </a-empty>
      <!-- 查看图片弹框-->
      <a-modal v-model="isShowPicsPop" :footer="null" title="查看举报图片">
        <div class="flex flex-wrap ss-pics-box flex-top">
          <img
            class="w-100 h-100 m-5 br5 object-cover ss-img cursor-pointer"
            :src="item.filePath"
            v-for="(item, index) in reportPics"
            :key="index"
            @click="openPreviewImage(item.filePath)"
          >
        </div>
      </a-modal>
      
      <!--图片预览-->
      <a-modal :visible="isPreviewVisible" :footer="null" @cancel=" isPreviewVisible = false">
        <div class="m-20">
          <img class="mx-w-700 mx-h-700 w-full " :src="previewImage"/>
        </div>
      </a-modal>
    </a-card>
  </a-spin>
</template>
<script>
import {tableMixins} from '@/utils/mixins'
import { getCustomerReportPics, getRiskLevelQuery, getYearCustomerReportPage } from '@/api/report'
import moment from 'moment'
export default {
  name: 'RiskLevelQuery',
  mixins: [tableMixins],
  data() {
    return {
      loading: false,
      isShowPicsPop: false,
      isPreviewVisible: false,
      previewImage: '',
      data: null,
      tableData: [],
      form: this.$form.createForm(this),
      columns: [
        {
          title: '失信人信息',
          scopedSlots: { customRender: 'dishonestPerson' }
        },
        {
          title: '证件信息',
          scopedSlots: { customRender: 'card' }
        },
        {
          title: '举报信息',
          scopedSlots: { customRender: 'report' }
        },
        {
          title: '状态',
          width: 120,
          align: 'center',
          scopedSlots: { customRender: 'state' }
        },
        {
          slots: {title: 'resultTitle'},
          dataIndex: 'result',
          width: 120,
          align: 'center',
          scopedSlots: {customRender: 'result'}
        },
        {
          title: '举报时间',
          align: 'center',
          width: 160,
          dataIndex: 'createTime'
        },
        {
          width: 100,
          title: '举报源',
          align: 'center',
          dataIndex: 'createByName'
        },
      ],
      reportReasonList: [],
      customerLevelEnums: [],
      reportPics: []
    }
  },
  computed: {
    reportTypesFn() { // 举报类型
      return (e, d) => {
        var arr = []
        this.reportReasonList.forEach((o_item) => {
          e.split(',').forEach((t_item) => {
            if (o_item.value == t_item && o_item.value != -1) {
              arr.push(o_item.name)
            }
          })
        })
        if (e.split(',').includes('-1')) {
          arr.push(d.reportOtherType)
        }
        return arr.join('，')
      }
    },
  },
  async mounted() {
    this.customerLevelEnums = await this.$utils.getDictList('CustomerLevel')
    this.$utils.getDictList('ReportType').then(res => { // 举报类型
      this.reportReasonList = [...res, { value: -1, name: '其他' }]
    })
    const data = this.$route.params
    if (data.name) {
      this.$nextTick(() => {
        this.form.setFieldsValue({
          name: data.name,
          phone: data.phone,
          credentialNo: data.credentialNo
        })
        this.getRiskData()
      })
    }
  },
  methods: {
    moment,
    getRiskData() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.loading = true
          getRiskLevelQuery(this.$utils.trimValue(values)).then(data => {
            this.data = data
          }).finally(() => {
            this.loading = false
          })
          this.pageNum = 1
          this.getData()
        }
      })
    },
    getData() {
      const params = this.$utils.trimValue(this.form.getFieldsValue())
      getYearCustomerReportPage({
        pageNo: this.pageNum,
        pageSize: this.rowsNum,
        search: params.name,
        ...params
      }).then(data => {
        console.log(data)
        this.tableData = data.items
        this.total = data.rowCount
      })
    },
    openPicsHandle(e) { // 打开弹框
      getCustomerReportPics({ reportId: e.id }).then((res) => {
        this.reportPics = res
        if (res.length > 0) {
          this.isShowPicsPop = true
        }
      })
    },
    openPreviewImage(e) { // 图片预览
      window.open(e)
    }
  }
}
</script>
<style lang="less" scoped>
  .info-form {
    .ant-form-item {
      margin-bottom: 22px;
    }
    
    /deep/ .ant-form-item-label {
      line-height: 1.5;
    }
    
    /deep/ .ant-form-item-control {
      color: #000;
      line-height: 1.5;
      word-break: break-all;
    }
  }

</style>
